<template>
  <h2>setup</h2>
  <p>{{ count }}</p>
  <button @click="add">btn</button>
</template>

<script>
// ref的作用是产生一个内存的指向
import { ref } from "vue";
export default {
  // setup就是组合api的入口
  // 同时它又是组件的生命周期
  // 不是用了组合api就不能使用选项api
  // setup是没有this
  // setup里面的内容，如果在template里面要用，需要去return
  setup() {
    // console.log("setup");
    // console.log(this);

    const count = ref(3);

    const add = () => {
      // count++;
      // console.log(count);
      count.value++;
    };

    return { count, add };
  },
};
</script>
